<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 添加 -->
    书名: <input type="text" class="inp_1">
    作者: <input type="text" class="inp_2">
    图片<input type="text" class="inp_3">
    价格<input type="text" class="inp_4">
    <button onclick="add()">添加</button>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>书名</th>
                <th>作者</th>
                <th>图片</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td><img src="" width="100px" height="100px"></td>
            </tr> -->
        </tbody>
    </table>

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        // 渲染
        function apply() {
            $.ajax({
                type: 'get',
                url: 'http://127.0.0.1:3000/users',
                dataType: 'json',
                success: (a) => {
                    a.data.data.forEach(item => {
                        $("tbody").append(`
                          <tr>
                <td>${item.id}</td>
                <td>${item.bookname}</td>
                <td>${item.name}</td>
                <td>${item.price}</td>
                <td><img src="${item.img}" width="100px" height="100px"></td>
            </tr> `)
                    });
                },
                error: (e) => {
                    console.log(e);

                }
            })
        }
        apply()

        function add() {
            $.ajax({
                type: 'post',
                url: 'http://127.0.0.1:3000/users',
                dataType: 'json',
                data: {
                    bookname: $('.inp_1').val(),
                    name: $('.inp_2').val(),
                    img: $('.inp_3').val(),
                    price: $('.inp_4').val()
                },
                success: (a) => {
                    apply()
                },
                error: (e) => {
                    console.log(e);

                }
            })
        }

    </script>
</body>

</html>